<?php get_header(); ?>

<!-- Content -->
<div id="content" >

    <!-- Profile -->
    <div id="profile"> 
     	<!-- About section -->
    	<div class="about">
        	<div class="photo-inner"><img src="images/photo.jpg" height="186" width="153" /></div>
            <h1>HOÀNG TRUNG</h1>
            <h3>LẬP TRÌNH VIÊN</h3>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
        </div>
        <!-- /About section -->
         
        <!-- Personal info section -->
    	<ul class="personal-info">
			<li><label>Tên</label><span>Hoàng Phước Thanh Trung</span></li>
            <li><label>Năm sinh</label><span>5 - 4 - 1992</span></li>
            <li><label>Địa chỉ</label><span>17/227 Phan Bội Châu <br/> Tp. Huế - Việt Nam</span></li>
            <li><label>Email</label><span>hoangphuocthanhtrung<br/>@gmail.com</span></li>
            <li><label>Điện thoại</label><span>09 424 89 616</span></li>
            <li><label>Website</label><span>www.hoangtrungweb.com</span></li>
        </ul>
        <!-- /Personal info section -->
    </div>        
    <!-- /Profile --> 

    <!-- Menu -->
    <div class="menu">
    	<ul class="tabs">
        	<li><a href="#profile" class="tab-profile">Thông tin</a></li>
        	<li><a href="#resume" class="tab-resume">Kinh nghiệm</a></li>
        	<li><a href="#portfolio" class="tab-portfolio">Dự án</a></li>
        	<li><a href="#contact" class="tab-contact">Liên hệ</a></li>
        </ul>
    </div>
    <!-- /Menu --> 
    
    <!-- Resume -->
    <div id="resume">
    	 <div class="timeline-section">
            <!-- Timeline for Employment  -->   
            <h3 class="main-heading"><span>Employment</span></h3>   
            <ul class="timeline">
                <li>
                                       
                    <div class="timelineUnit">
                        <h4>Manager<span class="timelineDate">2010 - Present</span></h4>
                        <h5>Ligula Non Lectus</h5>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscingVivamus sit amet ligula non lectus cursus egestas. Cras erat lorem, fringilla quis sagittis in, sagittis inNam leo tortor Nam leo tortor Vivamus.</p>
                    </div>
                </li>
                <li>
             
                    <div class="timelineUnit">
                        <h4>Web Developer<span class="timelineDate">2008 - 2010</span></h4>
                        <h5>Lorem ipsum</h5>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing Vivamus sit amet ligula non lectus. amet ligula non lectus Lorem ipsum dolor sit amet, consectetur adipiscing</p>
                    </div>
                </li>
                <li>
         
                    <div class="timelineUnit">
                        <h4>Web Designer<span class="timelineDate">2007</span></h4>
                        <h5>Consectetur adipiscing </h5>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing Vivamus sit Vivamus sit. Vivamus sit.. consectetur adipiscing Vivamus sit. Vivamus sit </p>
                    </div>
                </li>
                <div class="clear"></div>
            </ul> 
            <!-- /Timeline for Employment  -->

            <!-- Timeline for Education  -->   
            <h3 class="main-heading"><span>Education</span></h3>   
             <ul class="timeline">
                <li>            
                    <div class="timelineUnit">
                        <h4>Graphic Design<span class="timelineDate">2010 - 2012</span></h4>
                        <h5>School Of Design</h5>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing Vivamus sit amet ligula non lectus.consectetur adipiscingVivamus sit amet </p>
                    </div>
                </li>
                <li>             
                    <div class="timelineUnit">
                        <h4>Graphic Design<span class="timelineDate">2009</span></h4>
                        <h5>School of the Arts</h5>
                        <p>Lorem ipsum dolor sit amet, adipiscing elit. egestas.Vivamus sit amet ligula non lectus cursus egestas amet ligula non lectus cursus egestas. </p>
                    </div>
                </li>
                <div class="clear"></div>
            </ul> 
            <!-- /Timeline for Education  -->              
        </div>
        <div class="skills-section">
            <!-- Skills -->
            <h3 class="main-heading"><span>Graphics and media skills</span></h3> 
            <ul class="skills">
                <li>
                    <h4>Photoshop</h4>
                    <span class="rat6"></span>
                </li>
                <li>
                    <h4>Indesign</h4>
                    <span class="rat4"></span>
                </li>
                <li>
                    <h4>Illustrator</h4>
                    <span class="rat5"></span>
                </li>
                <li>
                    <h4>Flash</h4>
                    <span class="rat4"></span>
                </li>
                <li>
                    <h4>Corel Draw</h4>
                    <span class="rat2"></span>
                </li>
                <li>
                    <h4>Cinema4D</h4>
                    <span class="rat6"></span>
                </li> 
            </ul>
       
            <h3 class="main-heading"><span>Programming Skills</span></h3> 
            <ul class="skills">
                <li>
                    <h4>Dreamweaver</h4>
                    <span class="rat4"></span>
                </li>
                <li>
                    <h4>Php/Sql</h4>
                    <span class="rat2"></span>
                </li>
                <li>
                    <h4>Javascript</h4>
                    <span class="rat6"></span>
                </li>
                <li>
                    <h4>Wordpress</h4>
                    <span class="rat5"></span>
                </li>
                <li>
                    <h4>Drupal</h4>
                    <span class="rat3"></span>
                </li>
            </ul>
            <h3 class="main-heading"><span>Design Skills</span></h3> 
            <ul class="skills">
                <li>
                    <h4>Graphic Design</h4>
                    <span class="rat4"></span>
                </li>
                <li>
                    <h4>Web design</h4>
                    <span class="rat3"></span>
                </li>
                <li>
                    <h4>Print Design</h4>
                    <span class="rat6"></span>
                </li>
            </ul>
         <!-- /Skills -->
         </div>
    </div>
    <!-- /Resume --> 
                            
    <!-- Portfolio -->
    <div id="portfolio">

         <ul id="portfolio-filter">
            <li><a href="" class="current" data-filter="*">All</a></li>
            <li><a href="" data-filter=".webdesign">WebDesign</a></li>
            <li><a href="" data-filter=".photoghraphy">Photoghraphy</a></li>
            <li><a href="" data-filter=".illustration">Illustration</a></li>
            <li><a href="" data-filter=".print">Print</a></li>
            <li><a href="" data-filter=".animation">Animation</a></li>
        </ul>
        <div class="extra-text">Some of the projects i'm proud with</div>
        <ul id="portfolio-list">
            <li class="illustration print">
                <a href="portfolio/1.jpg" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis mi eu elit tempor facilisis id et neque" rel="portfolio" class="folio">
                    <img src="portfolio/1-thumb.jpg" alt="">
                    <h2 class="title">Hello Goodbye</h2>
                    <span class="categorie">Print / Illustration</span> 
                </a>
        	</li>
            <li class="webdesign">
                <a href="http://www.youtube.com/embed/c9MnSeYYtYY?autoplay=1" rel="portfolio" class="folio iframe">
                    <img src="portfolio/3-thumb.jpg" alt="" >
                    <h2 class="title">Snow time</h2>
                    <span class="categorie">Webdesign</span> 
                </a>
        	</li>                        
            <li class="photoghraphy">
                <a href="http://www.google.com" rel="portfolio" target="_new">
                    <img src="portfolio/2-thumb.jpg" alt="" >                            
                    <h2 class="title">Help us</h2>
                    <span class="categorie">Photography</span> 
                </a>
        	</li>
            <li class="animation print">
                <a href="portfolio/4.jpg" rel="portfolio" class="folio">
                    <img src="portfolio/4-thumb.jpg" alt="" >
                    <h2 class="title">Sunshine</h2>
                    <span class="categorie">Print / Animation</span> 
                </a>
        	</li>
            <li class="animation">
                <a href="portfolio/5.jpg" rel="portfolio" class="folio">
                    <img src="portfolio/5-thumb.jpg" alt="" >
                    <h2 class="title">Come together</h2>
                    <span class="categorie">Animation</span> 
                </a>
        	</li>
            <li class="webdesign print">
                <a href="portfolio/6.jpg" rel="portfolio" class="folio">
                    <img src="portfolio/6-thumb.jpg" alt="" >
                    <h2 class="title">The yellow</h2>
                    <span class="categorie">Webdesign / Print</span> 
                </a>
        	</li>
            <li class="photoghraphy">
                <a href="portfolio/7.jpg" rel="portfolio" class="folio">
                    <img src="portfolio/7-thumb.jpg" alt="" >
                    <h2 class="title">Black bird</h2>
                    <span class="categorie">Photoghraphy</span> 
                </a>
        	</li>
            <li class="illustration">
                <a href="portfolio/8.jpg" rel="portfolio" class="folio">
                    <img src="portfolio/8-thumb.jpg" alt="" >
                    <h2 class="title">Revolution</h2>
                    <span class="categorie">Illustration</span> 
                </a>
        	</li>
        </ul>
    </div>
    <!-- /Portfolio -->   
    
    <!-- Contact -->
    <div id="contact">
    	<div id="map"></div>
    	<!-- Contact Info -->
        <div class="contact-info">
        <h3 class="main-heading"><span>Contact info</span></h3>
    	<ul>
            <li>Level 13, 2 Elizabeth St, Melbourne Victoria 3000 Australia<br /><br /></li>
            <li>Email: John.smith@gmail.com</li>
            <li>Phone: +123 456 789 111</li>
            <li>Website: www.johnsmith.com</li>
        </ul>
        </div>
        <!-- /Contact Info -->
        
        <!-- Contact Form -->
        <div class="contact-form">
            <h3 class="main-heading"><span>Let's keep in touch</span></h3>
            <div id="contact-status"></div>
            <form action="" id="contactform">
                <p>
                	<label for="name">Your Name</label>
                	<input type="text" name="name" class="input" >
                </p>
                <p>
                	<label for="email">Your Email</label>
                	<input type="text" name="email" class="input">
                </p>
                <p>
                	<label for="message">Your Message</label>
                    <textarea name="message" cols="88" rows="6" class="textarea" ></textarea>
                </p>
                <input type="submit" name="submit" value="Send your message" class="submit">
            </form>
        </div>
        <!-- /Contact Form -->
    </div>
    <!-- /contact -->  

</div>
<!-- /Content -->
            
<?php get_footer(); ?>